
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./static/css/element-ui.css">
    <script src="./static/js/vue.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/js/element_index.js"></script>
    <style>
        html, body, #app {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .login_container {
            background: url("./static/images/bg.jpeg");
            height: 100%;
        }

        .login_box {
            width: 450px;
            height: 300px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .login_box > .avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }

        .login_box > .avatar_box > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }

        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .btns {
            display: flex;
            justify-content: flex-end;
        }

        .forgotPassword:hover {
            text-decoration: underline;
            color: #13ce66;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login_container">
        <!-- 登录盒子  -->
        <div v-if="status" class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="./static/images/logo.jpg" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form :model="loginForm" label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input @keyup.enter.native="login" type="password" v-model="loginForm.password"
                              prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item>
                    <div style="float: left">
                        <el-button size="medium" type="primary" @click="login">登录</el-button>
                        <el-button size="medium" type="info" @click="loginForm={}">重置</el-button>
                    </div>
                    <div @click="status= false" style="float: right;" class="forgotPassword">
                        找回密码？
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div v-else class="login_box" style="padding: 10px 8px">
            <div style="display: flex;justify-content: space-between;padding: 0 10px">
                <div>
                    <span>信息</span>
                </div>
                <div>
                    <i @click="status= true" class="el-icon-close"></i>
                </div>
            </div>
            <div style="margin-top: 50px;width: 90%;">
                <el-form label-width="100px" :model="forgotPasswordForm">
                    <el-form-item label="手机号">
                        <el-input type="text" v-model="forgotPasswordForm.phone"
                                  placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input type="text" v-model="forgotPasswordForm.code" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :disabled="isSending" @click="sendValidateCode" type="primary">
                            {{isSending?countdown+'秒后重试':'获取验证码'}}
                        </el-button>
                        <el-button @click="identityVerification" type="success">身份校验</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            loginForm: {},
            status: true,  //忘记密码
            forgotPasswordForm: {},//找回密码表单

            isSending: false,
            countdown: 0
        },
        methods: {
            login() {
                axios.post("/login", this.loginForm).then(function (resp) {
                    if (resp.data.code === 200) {
                        //弹出消息
                        app.$message.success(resp.data.msg);
                        //跳转页面
                        location.href = "/view/index";
                    } else {
                        //弹出消息
                        app.$message.error(resp.data.msg);
                    }
                })
            },
            /**
             * 手机号校验
             1--以1为开头；
             2--第二位可为3,4,5,7,8,中的任意一位；
             3--最后以0-9的9个整数结尾。
             */
            checkTelephone(telephone) {
                let reg = /^1[3,4,5,7,8][0-9]{9}$/;
                if (!reg.test(telephone)) {
                    return false;
                } else {
                    return true;
                }
            },
            //发送验证码
            sendValidateCode() {
                //获取用户输入的手机号
                let telephone = this.forgotPasswordForm.phone;
                //校验手机号输入是否正确
                if (!this.checkTelephone(telephone)) {
                    this.$message.error('请输入正确的手机号');
                    return;
                }
                axios.post('/login/sendValidateCode?phone=' + telephone).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success(res.data.msg);
                    } else if (res.data.code === 202) {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            //身份校验
            identityVerification() {
                axios.post('/login/identityVerification?phone=' + this.forgotPasswordForm.phone +
                    '&code=' + this.forgotPasswordForm.code).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.status = true;
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
            }
        }
    })
</script>

</html>
